<template>
  <a-layout :style="{ height:'100%'}">
    <a-layout-header class="header">
      <div class="header-left">
        <div class="logo" />
        <span class="logoText">云仓供应链</span>
      </div>
      <div class="header-right">
        <div class="user-opt">
          <div class="user-icon"></div>
          <div class="header-right-text">账户设置</div>
        </div>
        <div class="user-opt">
          <div class="logout-icon"></div>
          <a-popconfirm title="确定退出登录吗？" ok-text="确定" cancel-text="取消" @confirm="handleLogout">
            <div class="header-right-text">退出登录</div>
          </a-popconfirm>
        </div>
      </div>
    </a-layout-header>
    <a-layout :style="{ paddingTop:'64px' }">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" mode="inline" :style="{ height: '100%', borderRight: 0 }">
          <a-sub-menu :key="item.key" v-for="item in menuList">
            <template #title>
              <span>
                <user-outlined />
                {{item.name}}
              </span>
            </template>
            <a-menu-item v-for="sub in item.children" :key="sub.key" @click="menuClick(sub)">{{sub.name}}</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding:0 20px 20px;background:'#F7F8FA' ">
        <a-breadcrumb style="margin: 16px 0; text-align:left">
          <a-breadcrumb-item>货源管理</a-breadcrumb-item>
          <a-breadcrumb-item>分类管理</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content :style="{margin: 0, minHeight: '280px' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import menuList from '../../config/menu'
import routerKeys from '../../config/routerKeys'
import { loginAdminOut } from '../../config/api'
import store from '../../store'
import { message } from 'ant-design-vue'

export default defineComponent({
  components: {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined
  },
  setup() {
    let openKeys = ref([''])
    let selectedKeys = ref([''])
    const router = useRouter()
    const initMenuKey = () => {
      let useRoutes = useRoute()
      console.log('[当前路由]')
      let keysObj = routerKeys(useRoutes.path)
      openKeys.value = [keysObj.openKeys]
      selectedKeys.value = [keysObj.selectedKeys]
    }

    initMenuKey()

    const menuClick = item => {
      router.push({ path: item.router })
    }

    // 退出登录
    const handleLogout = async () => {
      const res = await loginAdminOut()
      // console.log(res)
      setTimeout(() => {
        store.commit('logout')
        router.replace({ path: '/login' })
        message.success(res.message)
      }, 500)
    }

    return {
      menuList,
      openKeys,
      selectedKeys,
      menuClick,
      handleLogout
    }
  }
})
</script>
<style lang="scss">
@import './dashboard';
</style>
